<template>
  <section>
    <search-box>
      <div class="search-box">
        <el-select v-model="available_zone_id" placeholder="请输入可用区ID" class="m-r-10">
          <el-option v-for="item in az_list" :key="item.available_zone_id" :value="item.available_zone_id" :label="item.available_zone_name"></el-option>
        </el-select>
        <el-input placeholder="请输入客户ID" class="w-220 m-r-10" v-model="customer_id"></el-input>
        <el-button type="primary" @click="FnSearchQuota()">查询</el-button>
      </div>
    </search-box>
    <el-table :data="quotaData" border>
      <el-table-column prop="customer_id" min-width="120" label="客户ID"></el-table-column>
      <el-table-column min-width="120" label="客户名称">
        <template #default="scope">
          {{scope.row.customer_name ? scope.row.customer_name : '-'}}
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="容器组数量">
        <template #default="scope">
          {{scope.row.pods ? scope.row.pods : 0}}个
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="CPU核数">
        <template #default="scope">
          {{scope.row.cpu ? scope.row.cpu : 0}}个
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="内存容量">
        <template #default="scope">
          {{scope.row.ram ? scope.row.ram : 0}}GB
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="临时存储容量">
        <template #default="scope">
          {{scope.row.tmp_storage ? scope.row.tmp_storage : 0}}GB
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="A5000数量">
        <template #default="scope">
          {{scope.row.a5000 ? scope.row.a5000 : 0}}个
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="4090数量">
        <template #default="scope">
          {{scope.row.rtx4090 ? scope.row.rtx4090 : 0}}个
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="3090数量">
        <template #default="scope">
          {{scope.row.rtx3090 ? scope.row.rtx3090 : 0}}个
        </template>
      </el-table-column>
      <el-table-column min-width="120" label="操作">
        <template #default="scope">
          <el-button type="text" class="p-0" :disabled="FnBtnDisabled('eci_2_editQuota')" @click="FnEdit(scope.row)">编辑</el-button>
          <el-button type="text" class="p-0" :disabled="FnBtnDisabled('eci_2_resetQuota')" @click="FnReset(scope.row)">恢复默认</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
  <quota-dialog v-model:visible="visible" :curRow="curRow" @searchList="FnSearchQuota"></quota-dialog>
</template>
<script setup>
import { ref } from 'vue';
import searchBox from '@/components/search-box.vue';
import quotaService from '@/service/eci/quota';
import azService from '@/service/eci/az'
import quotaDialog from './quotaDialog.vue';
import { authBtnDisabled } from '@/utils/auth.js'
import { useRoute } from 'vue-router';
import { ElMessageBox } from 'element-plus'

const available_zone_id = ref('');
const customer_id = ref('');
const quotaData = ref([]);
const route = useRoute();
const FnSearchQuota = async () => {
  let params = {
    available_zone_id: available_zone_id.value,
    customer_id: customer_id.value
  }
  await quotaService.getQuota(params).then(res => {
    quotaData.value = res.data;
  })
}
const FnBtnDisabled = (key) => {
  return authBtnDisabled(key, route.meta.name)
}
const az_list = ref([]);
const getAz = async () => {
  let params = {
    simple: '1'
  }
  await azService.getAzs(params).then(res => {
    az_list.value = res.data;
    available_zone_id.value = res.data?.length > 0 && res.data[0].available_zone_id
  })
}
getAz().then(() => {
  FnSearchQuota()
})
const visible = ref(false);
const curRow = ref({});
const FnEdit = (row) => {
  curRow.value = row
  visible.value = true;
}
const FnReset = (row) => {
  
  ElMessageBox.confirm('是否恢复默认配额？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let params = {
      action: 'reset',
      customer_id: row.customer_id,
      user_id: row.user_id,
      available_zone_id: row.available_zone_id,
      set_data: {
        id: row.id
      }
    }
    quotaService.setQuota(params).then(res => {
      if(res.code === 'Success') {
        ElMessage.success("恢复成功")
        FnSearchQuota()
      }
    })
  }).catch(() => {})
}
</script>
<style scoped>

</style>